<template>
  <div class="box">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="进港结算明细" name="first">
        <el-row>
          <el-col :span="24">
            <div class="header">
              <el-form
                ref="form"
                :model="jgjsmxform"
                label-width="110px"
                class="flex-start"
              >
                <el-form-item label="单号">
                  <el-input
                    v-model="jsmx"
                    placeholder="请输入单号"
                    style="width: 286px"
                  />
                </el-form-item>
                <el-form-item label="所属网点">
                  <el-select
                    v-model="jgjsmxform.networkNameId"
                    placeholder="请选择网点名称"
                    style="width: 286px"
                  >
                    <el-option
                      v-for="item in netlist"
                      :key="item.id"
                      :label="item.networkName"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="业务日期">
                  <el-date-picker
                    v-model="jgjsmxform.Time"
                    style="width: 708px"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @change="jgjsmxpicker"
                  />
                </el-form-item>
                <el-form-item label-width="39px">
                  <el-button class="cx" @click="jgjsmxonSubmit">查询</el-button>
                  <elbutton :obj="jgjsmxform" @dj="jgjsmxonReset" />
                </el-form-item>
                <el-form-item label="结算类型">
                  <el-select
                    v-model="jgjsmxform.settleType"
                    placeholder="请选择结算类型"
                    style="width: 286px"
                  >
                    <el-option label="全部" value="0" />
                    <el-option label="承包区" value="1" />
                    <el-option label="业务员" value="2" />
                  </el-select>
                </el-form-item>
                <el-form-item label="结算对象">
                  <el-input
                    v-model="jgjsmxform.settleObjectId"
                    style="width: 286px"
                    placeholder="请输入内容"
                  />
                </el-form-item>
                <el-form-item label="异常数据处理">
                  <el-select
                    v-model="jgjsmxform.abnormalReasonId"
                    placeholder="请选择异常数据"
                    style="width: 286px"
                  >
                    <el-option
                      v-for="(item, index) in ycsjlist"
                      :key="index"
                      :label="item.abnormalData"
                      :value="item.abnormalData"
                    />
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col :span="6">
            <div>当前页共{{ jgjsmxtableData.length }}项</div>
          </el-col>
          <el-col :span="4">
            <div>
              <el-button type="primary">新增</el-button>
              <el-button type="primary">删除</el-button>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div>
              <elltable
                ref="multipleTable"
                :loading="jgjsmxloafing"
                :data="jgjsmxtableData"
                :th="jgjsmxth"
                :n="4"
              />
            </div>
          </el-col>
        </el-row>
        <div class="block" style="display: flex; justify-content: flex-end">
          <pagination
            :current-page="jgjsmxform.pageDate.pageNum"
            :page-size="jgjsmxform.pageDate.pageSize"
            :total="jgjsmxtotal"
            @size-change="jgjsmxhandleSizeChange"
            @current-change="jgjsmxhandleCurrentChange"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="承包区派送汇总" name="second">
        <el-row>
          <el-col :span="24">
            <div class="header">
              <el-form
                ref="form"
                :model="jgjshzform"
                label-width="100px"
                class="flex-start"
              >
                <el-form-item label="所属网点">
                  <el-select
                    v-model="jgjshzform.networkNameId"
                    placeholder="请选择网点名称"
                    style="width: 286px"
                  >
                    <el-option
                      v-for="item in netlist"
                      :key="item.id"
                      :label="item.networkName"
                      :value="item.networkName"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="时间类型">
                  <el-select
                    v-model="jgjshzform.timeType"
                    placeholder="请选择账单类型"
                    style="width: 286px"
                  >
                    <el-option label="按天" value="1" />
                    <el-option label="按时间段" value="2" />
                  </el-select>
                </el-form-item>
                <el-form-item label="时间范围" style="width: 600px">
                  <el-date-picker
                    v-model="jgjshzform.Time"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @change="jgjscbhzpicker"
                  />
                </el-form-item>

                <el-form-item>
                  <el-button class="cx" @click="cbhzonSubmit">查询</el-button>
                  <elbutton :obj="jgjshzform" @dj="cbhzonReset" />
                </el-form-item>
              </el-form>
            </div>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col :span="6">
            <div>当前页共{{ cbqhztable.length }}项</div>
          </el-col>
          <el-col :span="4">
            <div>
              <el-button type="primary">新增</el-button>
              <el-button type="primary">删除</el-button>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div>
              <elltable
                ref="multipleTable"
                :loading="cbhzloading"
                :data="cbqhztable"
                :th="jgjshzth"
                :n="4"
              />
            </div>
          </el-col>
        </el-row>
        <div class="block" style="display: flex; justify-content: flex-end">
          <pagination
            :current-page="jgjshzform.pageDate.pageNum"
            :page-size="jgjshzform.pageDate.pageSize"
            :total="cbhztotal"
            @size-change="cbqhzhandleSizeChange"
            @current-change="cbqhzhandleCurrentChange"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="业务员派送汇总" name="third">
        <el-row>
          <el-col :span="24">
            <div class="header">
              <el-form
                ref="form"
                :model="jgjshzform"
                label-width="100px"
                class="flex-start"
              >
                <el-form-item label="所属网点">
                  <el-select
                    v-model="jgjshzform.networkNameId"
                    placeholder="请选择网点名称"
                    style="width: 286px"
                  >
                    <el-option
                      v-for="item in netlist"
                      :key="item.id"
                      :label="item.networkName"
                      :value="item.networkName"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="时间类型">
                  <el-select
                    v-model="jgjshzform.timeType"
                    placeholder="请选择账单类型"
                    style="width: 286px"
                  >
                    <el-option label="按天" value="1" />
                    <el-option label="按时间段" value="2" />
                  </el-select>
                </el-form-item>
                <el-form-item label="时间范围" style="width: 600px">
                  <el-date-picker
                    v-model="jgjshzform.time"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @change="jgjsywyhzpicker"
                  />
                </el-form-item>

                <el-form-item>
                  <el-button class="cx" @click="cbhzonSubmit">查询</el-button>
                  <elbutton :obj="jgjshzform" @dj="cbhzonReset" />
                </el-form-item>
              </el-form>
            </div>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col :span="6">
            <div>当前页共{{ cbqhztable.length }}项</div>
          </el-col>
          <el-col :span="4">
            <div>
              <el-button type="primary">新增</el-button>
              <el-button type="primary">删除</el-button>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div>
              <elltable
                ref="multipleTable"
                :loading="cbhzloading"
                :data="cbqhztable"
                :th="jgjshzth"
                :n="4"
              />
            </div>
          </el-col>
        </el-row>
        <div class="block" style="display: flex; justify-content: flex-end">
          <pagination
            :current-page="jgjshzform.pageDate.pageNum"
            :page-size="jgjshzform.pageDate.pageSize"
            :total="cbhztotal"
            @size-change="cbqhzhandleSizeChange"
            @current-change="cbqhzhandleCurrentChange"
          />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getOutletsList } from '@/api/dashboard'

import { Getjgjsmxtable, Getjgjsyclist, Getjgjshztable } from '@/api/Incoming.js'
export default {
  data() {
    return {
      Time: [],
      time: [],
      // 承包表格加载
      cbhzloading: false,
      // 业务员表格加载
      ywyhzloading: false,
      // 异常数据列表
      ycsjlist: [],
      netlist: [],
      activeName: 'first',
      // 进港结算明细
      jgjsmxloafing: false,
      jgjsmxth: [],
      jgjsmxtotal: 0,
      jgjsmxform: {
        abnormalReasonId: '',
        codes: [],
        endTime: '',
        networkNameId: '',
        pageDate: {
          pageNum: 1,
          pageSize: 10
        },
        settleObjectId: '',
        settleType: '',
        startTime: ''

      },
      jgjsmxtableData: [],
      tableData: [],
      form: {},
      // 进港结算汇总
      jgjshzth: [],
      jgjshzform: {
        collectType: '',
        endTime: '',
        networkNameId: '',
        pageDate: {
          pageNum: 1,
          pageSize: 1
        },
        startTime: '',
        timeType: ''
      },
      cbhztotal: 0,
      // 承包区汇总表格
      cbqhztable: []
    }
  },
  computed: {
    jsmx: {
      get() {
        return this.jgjsmxform.codes.join(',')
      },
      set(value) {
        console.log(value)
        this.jgjsmxform.codes = value !== '' ? value.split(',').map(item => item.trim()) : []
      }
    }
  },
  async created() {
    this.getnetlist()
    // 获取异常列表
    const res = await Getjgjsyclist()
    this.ycsjlist = res.data
  },
  methods: {
    // 获取网点名称
    async getnetlist() {
      const res = await getOutletsList()
      this.netlist = res.data
    },
    handleClick(tab) {
      this.jgjshzform.collectType = tab.index
      this.jgjshzth = []
      this.cbhztotal = 0
      this.jgjsmxtotal = 0
      this.jgjsmxth = []
      this.jgjsmxtableData = []
      this.cbqhztable = []
      // console.log(tab.index)
    },
    // 获取进港结算明细时间
    jgjsmxpicker(value) {
      if (value != null) {
        this.jgjsmxform.startTime = value[0]
        this.jgjsmxform.endTime = value[1]
      } else {
        this.jgjsmxform.startTime = ''
        this.jgjsmxform.endTime = ''
      }
    },
    // 进港结算明细查询
    async jgjsmxonSubmit() {
      if (this.jgjsmxform.startTime === '' || this.jgjsmxform.networkNameId === '') {
        this.$message('日期和网点不能为空')
        return
      }
      this.jgjsmxloafing = true
      const res = await Getjgjsmxtable(this.jgjsmxform)
      this.jgjsmxloafing = false
      console.log('进港结算明细', res)
      if (res.code === 200) {
        this.jgjsmxth = res.data.fields
        this.jgjsmxtableData = res.data.list.data
        this.jgjsmxtotal = res.data.list.total
      } else {
        this.jgjsmxtableData = []
        this.jgjsmxtotal = 0
      }
    },
    // 进港结算明细分页
    jgjsmxhandleCurrentChange(val) {
      this.jgjsmxform.pageDate.pageNum = val
      this.jgjsmxonSubmit()
    },
    jgjsmxhandleSizeChange(val) {
      this.jgjsmxform.pageDate.pageSize = val
      this.jgjsmxform.pageDate.pageNum = 1
      this.jgjsmxonSubmit()
    },
    // 获取承包区时间
    jgjscbhzpicker(value) {
      if (value != null) {
        this.jgjshzform.startTime = value[0]
        this.jgjshzform.endTime = value[1]
      } else {
        this.jgjshzform.startTime = ''
        this.jgjshzform.endTime = ''
      }
    },
    jgjsywyhzpicker(value) {
      if (value != null) {
        this.jgjshzform.startTime = value[0]
        this.jgjshzform.endTime = value[1]
      } else {
        this.jgjshzform.startTime = ''
        this.jgjshzform.endTime = ''
      }
    },
    // 承包区汇总查询
    async cbhzonSubmit() {
      if (this.jgjshzform.startTime === '' || this.jgjshzform.networkNameId === '' || this.jgjshzform.timeType === '') {
        this.$message('所有字段不能为空')
        return
      }
      this.cbhzloading = true
      const res = await Getjgjshztable(this.jgjshzform)
      this.cbhzloading = false
      console.log('汇总', res)
      if (res.code === 200) {
        this.jgjshzth = res.data.fields
        this.cbqhztable = res.data.list.data
        this.cbhztotal = res.data.list.total
      } else {
        this.cbqhztable = []
        this.cbhztotal = 0
      }
    },
    // 承包区汇总分页
    cbqhzhandleSizeChange(val) {
      this.jgjshzform.pageDate.pageSize = val
      this.jgjshzform.pageDate.pageNum = 1
      this.cbhzonSubmit()
    },
    cbqhzhandleCurrentChange(val) {
      this.jgjshzform.pageDate.pageNum = val
      this.cbhzonSubmit()
    },
    // 明细重置
    jgjsmxonReset(aaa) {
      this.jgjsmxform = aaa
      this.jgjsmxform.networkNameId = ''
    },
    // 承包汇总重置
    cbhzonReset(aaa) {
      this.jgjshzform = aaa
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  padding: 20px;
}

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}

.header {
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.cx {
  width: 80px;
  height: 42px;
  background: #2087d0;
  border-radius: 21px;
  color: #fff;
}
</style>
